<template>
  <NewCard title="发票详情" isright="isright">
    <template slot="right">
      <p class="titleRight">{{getstate(invoicedinfoList.status)}}</p>
    </template>
    <div class="details">
      <h3>发票信息</h3>
      <ul>
        <li>
          <span>发票类型</span>
          <p>{{ selecttype(invoicedinfoList.type) }}</p>
        </li>
        <li>
          <span>抬头类型</span>
          <p>{{ selecttitleType(invoicedinfoList.titleType) }}</p>
        </li>
        <li>
          <span>发票抬头</span>
          <p>{{ invoicedinfoList.title }}</p>
        </li>
        <li>
          <span>企业税号</span>
          <p>{{ invoicedinfoList.sh }}</p>
        </li>
        <li>
          <span>注册地址</span>
          <p>{{ invoicedinfoList.address }}</p>
        </li>
        <li>
          <span>开户银行</span>
          <p>{{ invoicedinfoList.khyh }}</p>
        </li>
        <li>
          <span>银行账号</span>
          <p>{{ invoicedinfoList.yhzh }}</p>
        </li>
        <li>
          <span>发票金额</span>
          <p>¥{{ invoicedinfoList.amount }}</p>
        </li>
      </ul>
      <h3>收件人信息</h3>
      <ul>
        <li>
          <span>邮箱</span>
          <p>{{ invoicedinfoList.email || $store.state.user.email }}</p>
        </li>
        <li>
          <span>收件人</span>
          <p>{{ invoicedinfoList.sjr }}</p>
        </li>
        <li>
          <span>手机号</span>
          <p>{{ invoicedinfoList.phone }}</p>
        </li>
        <li>
          <span>地址</span>
          <p>{{ invoicedinfoList.zcdz }}</p>
        </li>
      </ul>
      <h3>
        所含订单 ({{
          invoicedinfoList.orderList && invoicedinfoList.orderList.length
        }})
      </h3>
      <div class="orderList">
        <div
          class="orderBox"
          v-for="inv in invoicedinfoList.orderList"
          :key="inv.id"
        >
          <i>{{ inv.remark ? inv.remark.substring(0, 1) : "" }}</i>
          <div class="orderInfo">
            <h3>
              <!-- {{inv.remark}} -->

              {{ getRemarik(inv.remark) }}
            </h3>
            <p>{{ getType(inv.remark) }} · {{ inv.amount | sumFilters }}</p>
            <!-- select(inv.type) -->
          </div>
        </div>
        <!-- <div class="orderBox">
                  <i>社</i>
                  <div class="orderInfo">
                      <h3>社保停了十年，续缴的话养老金还能用吗？</h3>
                      <p>图文咨询 · 5000.00元</p>
                  </div>
              </div> -->
      </div>
    </div>
  </NewCard>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
export default {
  name: "DetailsInvoice",
  props: ["invoicedinfoList"],
  components: { NewCard },
  data() {
    return {
      isright: true,
    };
  },
  computed: {
    
  },
  methods: {
    getstate(status){
      const stateMap = {
        1: "开票中",
        2: "已开票",
        3: "已邮寄",
      };
      return stateMap[status];
    },
    getRemarik(remark) {
      if(remark){ 
        let title = remark.split("；")
        let type = title[0].split("：")
        return type[1]
      }
    },
    selecttype(value) {
      const stateMap = {
        1: "普通发票",
        2: "增值税专用发票",
      };
      return stateMap[value];
    },
    selecttitleType(value) {
      const stateMap = {
        1: "个人",
        2: "企业",
      };
      return stateMap[value];
    },
    select(value) {
      const stateMap = {
        1: "法律",
        2: "问答",
        3: "头条",
        4: "合同",
        5: "咨询",
      };
      return stateMap[value];
    },

    // 获取订单的type
    getType(remark){
      if(remark){
        let title = remark.split("；")
        let type = title[0].split("：")
        return type[0]
      }
    }
  },
};
</script>

<style scoped>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
p {
  margin: 0;
  padding: 0;
}
::v-deep .titleRight {
  font-weight: bold;
  color: #999;
  font-size: 14px;
}
/* 详情 */
.details {
  padding: 20px 30px;
}
.details h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: bold;
}
.details ul {
  margin-top: 10px;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #efefef;
}
.details ul > li {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 36px;
}
.details ul > li > span {
  display: block;
  width: 130px;
  color: #999;
}
.details ul > li > p {
  flex-grow: 1;
  color: #333;
}

/* 所含订单 */
.orderList {
  margin-top: 24px;
}
.orderBox {
  display: flex;
}
.orderBox i {
  display: block;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
  font-style: normal;
  font-size: 16px;
  background-color: #38476d;
  border-radius: 4px;
  margin-right: 16px;
}
.orderList .orderBox:nth-child(even) i {
  background-color: #7481a1;
}
.orderBox h3 {
  font-weight: bold;
  color: #333;
  font-size: 16px;
  margin-bottom: 12px;
  margin-top: 5px;
}
.orderBox p {
  font-size: 12px;
  color: #999;
}
.orderBox .orderInfo {
  flex-grow: 1;
  border-bottom: 1px solid #efefef;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
</style>